<!-- 微信绑定 -->
<template>
<div class="main">
	<div class="main_box">
        <h2>手机端(小程序)绑定</h2>
        <img src="@assets/images/weChat_applet.png" alt="窑炉小程序二维码" >
        <h3 class="mt10" style="">手机端管理设备查看数据等</h3>
    </div>
    <div class="main_box">
        <h2>微信公众号绑定</h2>
        <img :src="gzWeChatQrCode" alt="窑炉小程序二维码">
        <h3 class="mt10" style="">接收设备简报及报警消息</h3>
    </div>
</div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import Vue from 'vue';
    import { USER } from '@/store/mutation-types';
    export default {
        name: "BindWechat",
        data() {
            return {
                userInfo: {},
            }
        },
        mounted() {
            this.userInfo = Vue.ls.get(USER);
        },
        watch: {
            userID(){
                this.getWeChatQrCode(this.userID)
            }
        },
        computed: {
            ...mapState({
                gzWeChatQrCode: state => state.UserBasicInfo.gzWeChatQrCode,
            }),
            userID() {
                return this.userInfo.id
            }
        },
        methods: {
           ...mapActions({
                getWeChatQrCode: 'UserBasicInfo/getWeChatQrCode',//get绑定公众号二维码
            }),
        }
    }
</script>

<style lang="less" scoped>
    .main {
        display: flex;
        justify-content: center;

        .main_box {
          margin: 0 20px;
          text-align: center;

          h2 {
              font-size: 18px;
              margin-bottom: 10px;
          }

          img {
              height: 300px
          }

          h3 {
              font-size: 16px;
              margin-top: 10px;
          }
        } 
    }
</style>
